<template>
  <div>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="人员搜索">
        <el-input v-model.trim="formData.userName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="formData.roleId" placeholder="请选择" @focus="getRoleList">
          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="workloadList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        :index="(page.pageSize * (page.pageIndex - 1) + 1)"
      />
      <el-table-column
        prop="userName"
        label="人员名称"
      />
      <el-table-column
        prop="roleName"
        label="角色"
      />
      <el-table-column
        prop="mobile"
        label="联系电话"
      />
      <el-table-column
        prop="workCount"
        label="完成工单(本月)"
      />
      <el-table-column
        prop="progressTotal"
        label="进行中工单"
      />
      <el-table-column
        prop="cancelCount"
        label="拒绝工单(本月)"
      />
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="text" @click="details(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="page.pageIndex"
      :page-size.sync="page.pageSize"
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="workloadList"
      @current-change="workloadList"
    />
    <personnelDetails :is-show.sync="isShow" :user-id="userId" />
  </div>
</template>

<script>
import { workloadListAPI, getRoleListAPI } from '@/api/user'
import personnelDetails from './components/personnelDetails.vue'
export default {
  name: '',
  components: {
    personnelDetails
  },
  props: {},
  data() {
    return {
      formData: {
        userName: null,
        roleId: null
      },
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: null,
      totalPage: null,
      list: [],
      roleList: [],
      isShow: false,
      userId: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.workloadList()
  },
  methods: {
    async workloadList() {
      try {
        const { data } = await workloadListAPI({ ...this.page, ...this.formData })
        // console.log(data)
        this.list = data.currentPageRecords
        this.totalCount = +data.totalCount
        this.totalPage = +data.totalPage
        if (+data.totalCount > 0 && +data.totalPage.length === 0) {
          this.page.pageIndex--
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getRoleList() {
      const { data } = await getRoleListAPI()
      // console.log(data)
      this.roleList = data
    },
    details(row) {
      // console.log(row)
      this.isShow = true
      this.userId = row.userId
    }
  }
}
</script>

<style scoped>

</style>
